import React from "react";
import { Link, Routes, Route, Outlet } from "react-router-dom";

const Hot = () => <div>这是热映页面</div>;
const Cinema = () => <div>这是影院页面</div>;

const Home = () => {
  return (
    <>
      <div>这是首页</div>
      <ul>
        <li>
          <Link to="/home">热映</Link>
        </li>
        <li>
          <Link to="/home/cinema">影院</Link>
        </li>
      </ul>

      <hr />

      {/* Outlet相当于vue的router-view，用于做路由切换的容器 */}
      <Outlet />
    </>
  );
};
const About = () => <div>这是关于页</div>;

const App = () => {
  return (
    <div>
      <h2>router-v6-嵌套路由</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        {/* 可以写成Route嵌套的形式，嵌套的内容会在子组件的Outlet的位置进行渲染 */}
        <Route path="/home" element={<Home></Home>}>
          {/* 路径不一定要`/`开头，不是`/`开头的话，会自动拼接到上一级的路由上面 */}
          {/* <Route path="/home/hot" element={<Hot />}></Route> */}
          {/* 可以给Route不写path，直接写index，表示下一级路由的路径和上一级相同 */}
          <Route index element={<Hot />}></Route>
          <Route path="cinema" element={<Cinema />}></Route>
        </Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </div>
  );
};

export default App;
